<template>
  <div class="column-detail-page w-75 mx-auto">
    <div class="column-info row mb-4 border-bottom pb-4 align-items-center" v-if="column">
      <div class="col-3 text-center">
        <img :src="column.avatar && column.avatar.fitUrl" :alt="column.title" class="rounded-circle border w-100">
      </div>
      <div class="col-9">
        <h4>{{column.title}}</h4>
        <p class="text-muted">{{column.description}}</p>
      </div>
    </div>
    <post-list :list="list"></post-list>
    <button
        class="btn btn-primary mt-2 mb-5 mx-auto btn-block w-25"
        @click="loadMorePage" v-if="!isLastPage"
    >
      加载更多
    </button>
  </div>
</template>
<script lang="ts">
import { defineComponent,computed,onMounted,ref,watch, ComputedRef} from 'vue'
import {useRoute} from 'vue-router'
import { testData, testPosts } from '../testData'
import PostList from '../components/PostList.vue'
import store from '../store'
import {ColumnProps} from '../store'
import {useStore} from 'vuex'
import { addColumnAvatar } from '../helper'
import useLoadMore from '../hooks/useLoadMore'
export default defineComponent({
    components:{
        PostList
    },
    setup(){  //setup先执行，而后是onMounted
        const route = useRoute()
        const store = useStore()
        /*const currentId = route.params.id*/
        const id = route.params.id //取到点击专栏后得到的专栏id
        onMounted(()=>{ //在setup后面执行
          store.dispatch('fetchPosts',{params:{pageSize:5},id})
        })
        const record = computed(()=>store.getters.getPostRecord(id)) //这里使用computed计算属性是为了当专栏值有所改变时，会重新获取
        const total = computed(()=>record.value[id as string] && record.value[id as string].total)//这里使用computed计算属性是为了当总数有所改变时，会重新获取
        const currentPage = computed(()=>record.value[id as string] && record.value[id as string].currentPage)
        const {loadMorePage,isLastPage} = useLoadMore('fetchPosts',total ,id as string,{pageSize:5,currentPage:(currentPage.value?currentPage.value + 1:2)})
        const column = computed(() => {
          const selectColumn = store.getters.getColumnById(id) as ColumnProps | undefined
          if (selectColumn) {   //如果找到了一个专栏
            addColumnAvatar(selectColumn, 100, 100) //将列表的图片变成宽高都为100px的图片
          }
          return selectColumn
        })
        const list = computed(()=>store.getters.getPostsByCid(id))

        return {
            column,
            list,
            loadMorePage,
            isLastPage,
            id
        }
    }
})
</script>
 